import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Modal, Row, Col, Popover, Button, Tag } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { StickyContainer, Sticky } from 'react-sticky';
import { Link, routerRedux } from 'dva/router';
import MyTreeLineMarkTag from '../../components/_public/MyTreeLineMarkTag';
// import store from '../../index';
import { getParamUrl, getMathJax } from '../../utils/formatDataSource';
import MyStyle from '../index.less';
@connect(({ tag2, loading }) => ({
  tag:tag2,
}))
class CheckMarkConfig extends PureComponent {
  state = {
    checkDetail: [],
    statisticsModal: false,
    totalResult: 0,
  };
  componentDidMount() {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);

    dispatch({
      type: 'tag/checkWordMarkList',
      payload: params,
    }).then(() => {
      this.setState({
        checkDetail: this.props.tag.checkDetail,
      });
    });
  }
  constructor(props) {
    super(props);
    this.selectCheckResultCount = this.selectCheckResultCount.bind(this);
  }
  checkWord = (item, checkValue, index) => {
    const { dispatch } = this.props;
    const { checkDetail } = this.state;
    var checkObj = {};
    checkObj.questionTagLogId = item.id;
    checkObj.checkValue = checkValue;
    dispatch({
      type: 'tag/checkQuestionTag',
      payload: checkObj,
    }).then(() => {
      item.checkResult = checkValue;
      const nextWordDetail = [...checkDetail];
      nextWordDetail.splice(index, 1, item);
      this.setState({
        checkDetail: nextWordDetail,
      });
    });
  };
  selectCheckResultCount = () => {
    const { dispatch, tag, location: { search } } = this.props;
    const { checkDetail } = this.state;
    const wordMarkUserId = checkDetail[0].wordMarkUserId;
    dispatch({
      type: 'tag/selectCheckResultCount',
      payload: { wordMarkUserId: wordMarkUserId },
    })
      .then(() => {
        this.setState({ totalResult: tag.totalResult });
      })
      .then(() => {
        this.setState({ statisticsModal: true });
      });
  };
  checkFinalResultOk = e => {
    const { dispatch, location: { search } } = this.props;
    const { checkDetail } = this.state;
    const params = getParamUrl(search);
    dispatch({
      type: 'tag/checkWordMarkFinal',
      payload: { wordMarkUserId: checkDetail[0].wordMarkUserId, status: 4, type: params.type },
    })
      .then(() => {
        //弹框关闭
        this.setState({ statisticsModal: false });
      })
      .then(() => {
        this.dispatch(routerRedux.push('/research/jy'));
      });
  };
  checkFinalResultCancel = e => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    const { checkDetail } = this.state;
    dispatch({
      type: 'tag/checkWordMarkFinal',
      payload: { wordMarkUserId: checkDetail[0].wordMarkUserId, status: 3, type: params.type },
    })
      .then(() => {
        //弹框关闭
        this.setState({ statisticsModal: false });
      })
      .then(() => {
        // const { dispatch } = store;
        this.dispatch(routerRedux.push('/research/jy'));
      });
  };
  modalCancel = () => {
    this.setState({ statisticsModal: false });
  };
  render() {
    const { checkDetail } = this.state;
    console.log(checkDetail);
    const { totalResult } = this.props.tag;
    return (
      <PageHeaderLayout>
        <Card>
          <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
              <Button
                type="primary"
                size="small"
                onClick={() => this.props.dispatch(routerRedux.push('/research/jy'))}
              >
                返回
              </Button>
            </Col>
          </Row>
        </Card>
        {checkDetail.map((item, i) => (
          <div>
            <Card key={i} bordered={true}>
              <Col span={16}>
                <div>{getMathJax(item.stem)}</div>
                <div>
                  {item.questionTypeVoList == null
                    ? ''
                    : item.questionTypeVoList.map((typeItem, index) => (
                        <Popover
                          overlayStyle={{ maxWidth: '400px' }}
                          placement="right"
                          trigger="hover"
                          title={
                            typeItem.treeNodes == null
                              ? ''
                              : typeItem.treeNodes.map(item => {
                                  return getMathJax(item.content);
                                })
                          }
                        >
                          <Tag key={index}>
                            {typeItem.treeNodes == null
                              ? ''
                              : typeItem.treeNodes.map(item => {
                                  return getMathJax(item.content, 'afds', 50, MyStyle.mathPreview);
                                })}
                          </Tag>
                        </Popover>
                      ))}
                </div>
                <div>
                  <Tag hidden={item.districtCategory == null}>{item.districtCategory}</Tag>
                  <Tag hidden={item.yearCategory == null}>{item.yearCategory}</Tag>
                  <Tag hidden={item.sourceCategory == null}>{item.sourceCategory}</Tag>
                  <Tag hidden={item.recommendCategory == null}>{item.recommendCategory}</Tag>
                  <Tag hidden={item.appearCategory == null}>{item.appearCategory}</Tag>
                  <Tag hidden={item.wrongCategory == null}>{item.wrongCategory}</Tag>

                  <Tag hidden={item.tixingCategory == null}>{item.tixingCategory}</Tag>
                  <Tag hidden={item.nianjiCategory == null}>{item.nianjiCategory}</Tag>
                  <Tag hidden={item.sfhjxCategory == null}>{item.sfhjxCategory}</Tag>
                  <Tag hidden={item.tihaoCategory == null}>{item.tihaoCategory}</Tag>
                </div>
              </Col>
              <Col span={8}>
                <Row>
                  <Col span={8}>
                    <Button
                      type="primary"
                      hidden={item.checkResult != null && item.checkResult != 1}
                      disabled={item.checkResult != null}
                      onClick={() => {
                        this.checkWord(item, 1, i);
                      }}
                    >
                      正 确
                    </Button>
                  </Col>
                  <Col span={8}>
                    <Button
                      type="danger"
                      hidden={item.checkResult != null && item.checkResult != 2}
                      disabled={item.checkResult != null}
                      onClick={() => {
                        this.checkWord(item, 2, i);
                      }}
                    >
                      错 误
                    </Button>
                  </Col>
                </Row>
              </Col>
            </Card>
          </div>
        ))}
        <Card border={false}>
          <Col span={8}>
            <Button type="primary" onClick={this.selectCheckResultCount}>
              提 交
            </Button>
          </Col>
        </Card>
        <Modal
          title="审核统计"
          visible={this.state.statisticsModal}
          onCancel={this.modalCancel}
          footer={[
            <Button onClick={this.checkFinalResultCancel}>打回</Button>,
            <Button type="primary" onClick={this.checkFinalResultOk}>
              通过
            </Button>,
          ]}
        >
          <p>
            正确：{totalResult}/{this.state.checkDetail.length}
          </p>
          <p>正确率：{(totalResult / this.state.checkDetail.length * 100).toFixed(2)}%</p>
        </Modal>
      </PageHeaderLayout>
    );
  }
}

export default CheckMarkConfig;
